<%@page pageEncoding="UTF-8" isELIgnored="false"%>
<%@include file="/WEB-INF/jsp/common/prelude.jsp"%>
<%@taglib prefix="tags" tagdir="/WEB-INF/tags" %>

<c:set var="photo" value="${it.photo}"/>

<tags:layout title="写真詳細" pageId="/photos/detail">
  <style>@import "${pageContext.request.contextPath}/css/pc/photos/detail.css";</style>
  <table>
    <tr>
      <td>
        <table class="photo-properties">
          <tr>
            <th colspan="2">
              オリジナルの画像
            </th>
          </tr>
          <tr>
            <td colspan="2" align="center">
              <img id="photo" src="${pageContext.request.contextPath}/photos/${photo.id}?size=M"/>
            </td>
          </tr>
          <tr>
            <th>ファイル名:</th>
            <td>${photo.original.fileName}</td>
          </tr>
          <tr>
            <th>状態:</th>
            <td>
              <c:choose>
                <c:when test="${photo.status == 'ORIGINAL'}">オリジナル</c:when>
                <c:when test="${photo.status == 'RETOUCHING'}">レタッチ中</c:when>
                <c:when test="${photo.status == 'RETOUCHED'}">レタッチ済み</c:when>
              </c:choose>
            </td>
          </tr>
          <tr>
            <th>アップロードされた日時:</th>
            <td><fmt:formatDate value="${photo.uploadedAt}" pattern="yyyy/MM/dd HH:mm:ss"/></td>
          </tr>
          <tr>
            <th>アップロードされた日時:</th>
            <td><fmt:formatDate value="${photo.uploadedAt}" pattern="yyyy/MM/dd HH:mm:ss"/></td>
          </tr>
          <c:if test="${photo.status != 'ORIGINAL'}">
            <tr>
              <th>レタッチが開始された日時:</th>
              <td><fmt:formatDate value="${photo.retouchStartedAt}" pattern="yyyy/MM/dd HH:mm:ss"/></td>
            </tr>
            <tr>
              <th>レタッチャー:</th>
              <td><c:out value="${photo.retouchedBy.name}"/></td>
            </tr>
          </c:if>
          <tr>
            <td colspan="2" align="center">
              <c:choose>
                <c:when test="${photo.status == 'ORIGINAL'}">
                  <form method="POST" action="${pageContext.request.contextPath}/photos/${photo.id}/startRetouch" id="startRetouchForm">
                    <button id="startRetouchButton">ダウンロードしてレタッチを開始</button>
                  </form>
                </c:when>
                <c:when test="${photo.status == 'RETOUCHING' and photo.retouchedBy == it.resource.currentUser}">
                  <form action="${pageContext.request.contextPath}/photos/${photo.id}/endRetouch" method="post" enctype="multipart/form-data">
                    <input type=file name="photo"><br/>
                    <input type=submit value="アップロードしてレタッチを完了">
                  </form>
                </c:when>
                <c:otherwise>
                  <form action="${pageContext.request.contextPath}/photos/${photo.id}">
                    <input type="hidden" name="download" value="true">
                    <input type=submit value="ダウンロード">
                  </form>
                </c:otherwise>
              </c:choose>
            </td>
          </tr>
        </table>
      </td>
      <c:if test="${photo.status == 'RETOUCHED'}">
        <td>
          <table class="photo-properties">
            <tr>
              <th colspan="2">
                レタッチ済みの画像
              </th>
            </tr>
            <tr>
              <td colspan="2" align="center">
                <img id="photo" src="${pageContext.request.contextPath}/photos/${photo.id}?retouched=true&size=M"/>
              </td>
            </tr>
            <tr>
              <th>ファイル名:</th>
              <td>${photo.retouched.fileName}</td>
            </tr>
            <tr>
              <th>レタッチが開始された日時:</th>
              <td><fmt:formatDate value="${photo.retouchStartedAt}" pattern="yyyy/MM/dd HH:mm:ss"/></td>
            </tr>
            <tr>
              <th>レタッチが終了された日時:</th>
              <td><fmt:formatDate value="${photo.retouchFinishedAt}" pattern="yyyy/MM/dd HH:mm:ss"/></td>
            </tr>
            <tr>
              <td colspan="2" align="center">
                <form action="${pageContext.request.contextPath}/photos/${photo.id}">
                  <input type="hidden" name="retouched" value="true">
                  <input type="hidden" name="download" value="true">
                  <input type=submit value="ダウンロード">
                </form>
              </td>
            </tr>
          </table>
        </td>
      </c:if>
    </tr>
  </table>
  <script src="${pageContext.request.contextPath}/js/view/pc/photos/detail.js"></script>
</tags:layout>

